<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <!--socket-->
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <!--vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--elementUI-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="bg2">
    <el-form id="registerFormId" class="login-container" label-position="left"
             label-width="0px" action="/toLogin" method="post" @keyup.enter.native="register"
             enctype="multipart/form-data">
        <h3 style="float: left">请注册</h3>
        <el-link type="warning" href="login.html" style="margin-top: 23px;margin-left: 180px;">已有账号？去登录</el-link>

        <el-form-item>
            <img id="img1" src="/assets/default.png" @click="upload" style="height:100px;width:100px;border-radius:50px;margin-left: 18%;">
            <input id="file1" type="file" name="avatar" style="display: none;" @change="updateAvatar"/><br/>
        </el-form-item>
        <p style="color: red;">{{nameHint}}</p>
        <el-form-item>
            <el-input type="text" v-model="loginForm.username"
                      auto-complete="off" placeholder="昵称" name="username"
                      @blur="checkRegister"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="text" v-model="loginForm.account"
                      auto-complete="off" placeholder="账号" name="account"
                      @blur="checkRegister"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" v-model="loginForm.password"
                      auto-complete="off" placeholder="密码" name="password" show-password></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;border: none" v-on:click="register">注册</el-button>
        </el-form-item>

    </el-form>
</div>

</body>
<script>

    new Vue({
        el: '#bg2',
        data () {
            return {
                loginForm: {
                    account: '',
                    password: '',
                    username:'',
                },
                nameHint:'',
            }
        },
        methods: {
            upload(){
                document.getElementById("file1").click()
            },
            updateAvatar(){
                //1 创建文件读取对象
                var reader=new FileReader();

                //文件存储在file表单元素的files属性中，它是一个数组
                //没有返回值，但是读取完毕后，将读取结果存储在对象的result中
                var fil=document.getElementById("file1").files;
                //readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，
                // 并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
                reader.readAsDataURL(fil[0]);

                //当读取成功后触发
                reader.onload=function(){
                    document.getElementById("img1").src=reader.result;
                    // alert(reader.result)
                };
            },
            checkRegister(){
                var _this = this
                axios.post('/register/check', {
                    'account': this.loginForm.account,
                    'password': this.loginForm.password,
                    'username': this.loginForm.username,
                })
                    .then(resp => {
                        if (resp.data == "200") {
                            _this.nameHint=''
                        }else {
                            _this.nameHint=resp.data
                        }
                    })
                    .catch(failResponse => {
                    })
            },
            register () {
                if(this.nameHint!=''){
                    this.$alert(this.nameHint, '错误提示', {
                        confirmButtonText: '确定'
                    })
                    return;
                }

                document.querySelector("#registerFormId").submit();
                //清空表单
                this.loginForm={
                    account: '',
                    password: '',
                    username:'',
                }
                document.getElementById("img1").src='';
                document.getElementById("file1").value='';
            }

        }
    })
</script>

<style>
    *{
        z-index:0;
    }
    [v-cloak] {
        display: none !important;
    }
    #bg2{
        top: 0;
        left: 0;
        margin: 0px;
        padding: 0;
        background: url("http://localhost:8888/assets/bg2.jpg") no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: -1;
    }
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

</style>
</html>